import React, { useState } from 'react';
import './index.scss';
import ContentWrapper from '../../../components/ContentWrapper';
import { PlayIcon } from '../Playbtn';
import VideoPopup from '../../../components/VideoPopup';
import Img from '../../../components/LazyLoadImg';

const VideosSection = ({ data, loading }: any) => {
  const [show, setShow] = useState(false);
  const [videoId, setVideoId] = useState<any>(null);

  const loadingSkeleton = () => {
    return (
      <div className="skItem">
        <div className="thumb skeleton"></div>
        <div className="row skeleton"></div>
        <div className="row2 skeleton"></div>
      </div>
    );
  };

  return (
    <div className="videosSection">
      <ContentWrapper>
        <div className="sectionHeading">官方视频</div>
        {!loading ? (
          <div className="videos">
            {data?.results?.map((video: any) => {
              return (
                <div
                  className="videoItem"
                  key={video.id}
                  onClick={() => {
                    setVideoId(video.key);
                    setShow(true);
                  }}
                >
                  <div className="videoThumbnail">
                    <Img src={`https://img.youtube.com/vi/${video.key}/mqdefault.jpg`}></Img>
                    <PlayIcon></PlayIcon>
                  </div>
                  <div className="videoTitle">{video.name}</div>
                </div>
              );
            })}
          </div>
        ) : (
          <div className="videoSkeleton">
            {loadingSkeleton()}
            {loadingSkeleton()}
            {loadingSkeleton()}
            {loadingSkeleton()}
          </div>
        )}
      </ContentWrapper>
      <VideoPopup show={show} setShow={setShow} videoId={videoId} setVideoId={setVideoId} />
    </div>
  );
};

export default VideosSection;
